<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component>
        <!-- 在具名插槽的基础上给插槽的作用域一个别名slotProps1 之后就可以通过 作用域.xxx去访问该插槽暴露出来的数据了 -->
        <template v-slot:cpu="slotProps1">
          <h3>i7骁龙{{slotProps1.cores}}核处理器满足您的打游戏需求</h3>
        </template>

        <!-- 在具名插槽的基础上给插槽的作用域一个别名slotProps1 作用域.xxx去访问该插槽暴露出来的数据了 -->
        <template v-slot:default="slotProps2">
          <h6>我是渺小的{{slotProps2.nickname}}</h6>
        </template>
      </my-component>
    </div>

    <script>
      const app = Vue.createApp({});

      app.component("my-component", {
        data() {
          return {
            coresCount: 8,
            myName: "我不配拥有姓名",
          };
        },
        template: `
        <div>
          <h3>劳资是子组件</h3>
          <div class="cpu">
            <!-- 在具名插槽的基础上 暴露一些数据给父组件 将来父组件就可以通过 作用域.cores去进行访问了 -->
            <slot :cores="coresCount" name="cpu"></slot>
          </div>

          <div class="default">
            <!-- 在具名插槽（无名则相当于name="default"）的基础上 暴露一些数据给父组件 作用域.nickname去进行访问了-->
            <slot :nickname="myName"></slot>
          </div>
        </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
